{% load static %}
<html>
  <head>
    {% get_static_prefix as STATIC_PREFIX %}
  <meta http-equiv="Content-Type" content="charset=UTF-8" />
  <!--<link rel="shortcut icon" href="{{STATIC_PREFIX}}images/v2/icon.png" type="image/x-icon" />-->
  <link rel="stylesheet" href="{{STATIC_PREFIX}}js/jquery.jgrowl.css" type="text/css" />
  <title>Want to know</title>
  <script src="{{STATIC_PREFIX}}js/jquery.min.js" type="text/javascript"></script>
  <script type="text/javascript" src="{{STATIC_PREFIX}}js/jquery.tools.min.js" ></script>
  <script src="{{STATIC_PREFIX}}js/jquery.jgrowl_compressed.js" type="text/javascript"></script>    
{% block jsblock %}
{% endblock %}
<style>
.qaccept0{
background-image:url({{STATIC_PREFIX}}images/v2/accepted.png);
background-position:bottom;
display: inline-block;
height: 25px;
width: 25px;
}
.qaccept1{
background-image:url({{STATIC_PREFIX}}images/v2/accepted.png);
background-position:top;
display: inline-block;
height: 25px;
width: 25px;
}
a.qaccept1:hover{
background-position:bottom;
}
a.qaccept0:hover{
background-position:top;
}
a.upvote-arrow{
background-image:url({{STATIC_PREFIX}}images/v2/arrows.png);
background-position:top;
display: inline-block;
height: 25px;
width: 25px;
}
a.qstar {
background-image:url({{STATIC_PREFIX}}images/v2/star.png);
background-position:top;
display: inline-block;
height: 25px;
width: 25px;
}
a.qstar:hover {
cursor: pointer;
background-image:url({{STATIC_PREFIX}}images/v2/star.png);
background-position: bottom;
display: inline-block;
height: 25px;
width: 25px;
}
a.downvote-arrow{
background-image:url({{STATIC_PREFIX}}images/v2/arrows.png);
background-position:bottom;
display: inline-block;
height: 25px;
width: 25px;
}
div{
    border-bottom-left-radius: 3px;
  border-top-left-radius: 3px;
  
  border-bottom-right-radius: 3px;
  border-top-right-radius: 3px;
}
body{
  font-family: arial;
  font-size:12px;
}
.fl{float:left;}
.fr{float:right;}

p.date{color: gray; font-size:8pt; font-family:arial;margin:0px;padding:0px;display:inline;}
.tag-cloud{background-color:#eee;border:1px solid #b87733;}
.tag-cloud div{padding:3px;}
.tag-cloud-header{background-color:#b87733;color:white;}
a.tag-item{
cursor:pointer;
background-color:#333;
font-size:10px;
padding:3px;
margin: 1px;
border-right: 1px solid #000;
border-bottom: 1px solid #444;
display:inline-block;
color:#white;
  border-bottom-left-radius: 3px;
  border-top-left-radius: 3px;
  
  border-bottom-right-radius: 3px;
  border-top-right-radius: 3px;
}
a.tag-item:hover {
background-color:#5e3d29;
color:white;
}
.split-line{
background-image: url('/static/images/v2/split_line.png');
background-repeat: repeat-x;
width: 100%;
height:2px;
margin-top: 10px;
}
.quserinfo{width:200px;background-color:#eee;padding:10px;margin:5px;}
input[type=text], input[type=password], textarea{
  border:1px solid #ccc;
  padding:4px;
  -moz-box-shadow:0 0 10px #eee inset;
}

h1 {
  font-family: arial;
}
.header h1{
  color: white;
  font-size: 40px;
}
.header{
  background-color: #aaa;
  border-bottom-left-radius: 5px;
  border-top-left-radius: 5px;
  
  border-bottom-right-radius: 5px;
  border-top-right-radius: 5px;
  padding: 10px;  
}
form label{display: block;}
/* listting stat*/
.numblock{
  display:inline-block;
  padding: 5px;
  margin: 1px;
  background-color:#ddd;
  border-bottom-left-radius: 5px;
  border-top-left-radius: 5px;
  
  border-bottom-right-radius: 5px;
  border-top-right-radius: 5px;
}
.numblock .num{
  font-size: 23px;
  text-align: center;
}
.pagination{
  background-color: #aaa;
  padding: 5px;
}
</style>
  </head>
  <body>
    <div style="width:60%;display:inline-block;">
    <div class="header">
      <a href="/"><h1>Want to know everything!</h1></a>
      {% if user.is_authenticated %}<a href="/accounts/logout/">Logout {{user}}</a>{%else%}<a href="/accounts/register/">Register</a> | <a href="/accounts/login/">Login</a>{% endif %}
       | <a href="/ask/">Ask question</a> 
    </div> 
{% block content %}
{% endblock %}
</div>
  </body>
</html>